<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./libs/vue2.js"></script>
    <style>
        .child1{
            background-color: lightgreen;
            margin: 10px;
            padding: 10px;
        }
        .child2{
            background-color: lightcoral;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <child1></child1>
        <child2></child2>
    </div>
</body>
<script>
    // 创建一个空的vue实例对象, 充当事件中心
    const vm=new Vue();
    Vue.component('child1',{
        template:`
            <div class="child1">
                <h1>child1组件</h1>
                <button @click="sendData">发送数据</button>
            </div>
        `,
        methods:{
            sendData(){
                // vm.$emit() 触发自定义事件
                vm.$emit('message','hello child2!!!');
            }
        }
    });
    Vue.component('child2',{
        template:`
            <div class="child2">
                <h1>child2组件</h1>
                <h3>{{msgFromChild1}}</h3>
            </div>
        `,
        data(){
            return {
                // 接收child1发送的数据
                msgFromChild1:''
            }
        },
        created(){
            // 监听自定义事件message
            // data: 系统参数, 表示$emit()发送的数据
            vm.$on('message',(data)=>{
                // console.log(data);
                this.msgFromChild1=data;
            });
        }
    });
    new Vue({
        el:'#app'
    });
</script>
</html>